<!--
 * @Author: 袁锐城
 * @Date: 2024-06-04 14:45:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-06-04 20:25:43
 * @Description: 
-->
<template>
    <div id="login_Box">
        <div class="login_form">
            <div class="title">
                用户登录
            </div>
            <el-form class="el_form_custom" :model="loginForm" :rules="rules" ref="loginForm">
                <el-form-item class="el_form_item_custom" prop="mobile">
                    <el-input placeholder="请输入手机号码" v-model="loginForm.mobile"></el-input>
                </el-form-item>
                <el-form-item class="el_form_item_custom" prop="password">
                    <el-input placeholder="请输入密码" show-password v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item class="el_form_item_custom" prop="isSaveSercet">
                    <el-checkbox v-model="loginForm.isSaveSercet">
                        记住密码
                    </el-checkbox>
                </el-form-item>
                <el-form-item class="el_form_item_custom">
                    <el-button type="primary" class="el_button" style="margin-bottom: 20px;" @click="login">立即登录</el-button>
                </el-form-item>
                <el-form-item class="el_form_item_custom" >
                    <el-button class="el_button" @click="applicationForUSE">申请使用</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default{
    name:'loginPage',
    data(){
        return {
            loginForm:{
                mobile:'13580191890',
                password:'test',
                isSaveSercet:false,
            },
            rules:{
                mobile:[
                    {   
                        validator:(rule, value, callback)=>{
                            const regx=new RegExp(/^1[3-9]\d{9}$/)
                            console.log(value)
                            if(value.length<1){
                                this.$message.error('手机号码不能为空')
                                callback(new Error(''))
                            }
                            else if(!regx.test(value)){
                                this.$message.error('手机号码格式不正确')
                                callback(new Error(''))
                            }
                            else{
                                callback()
                            }

                        },
                        trigger:'blur'
                    }
                ],
                password:[
                    {
                        validator:(rule, value, callback)=>{
                            console.log(value)
                            const regx = new RegExp(/^[a-zA-Z0-9]{4,6}$/);
                            if(value.length<1){
                                this.$message.error('密码不能为空')
                            }
                            else if(!regx.test(value)){
                                this.$message.error('密码为4-6位字母或数字')
                            }
                            else{
                                callback()
                            }
                        },
                        trigger:'blur'
                    }
                ]
            }
        }
    },
    methods:{
        login(){
            this.$refs.loginForm.validate((isOk)=>{
                if(isOk){
                    this.$message.success('登陆成功')
                    this.$router.push('/')
                }
            })
        },
        applicationForUSE(){
            this.$message.success('正在开发')
        }
    }
}
</script>
<style lang="scss" scoped>
#login_Box{
    width:100%;
    height:100%;
    background-image: url('../assets/login_img/bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    .login_form{
        width: 440px;
        height: 563px;
        border-radius: 14px;
        background: #FFFFFF;
        box-shadow: 0px 15px 30px 0px rgba(25, 74, 142, 0.1076);
        .title{
            width: 100%;
            height: 19px;
            line-height: 19px;
            font-family: MiSans;
            font-size: 16px;
            text-align: center;
            margin-top: 153px;
        }
        .el_form_custom{
            height: 253px;
            width: 290px;
            margin:0 auto;
            margin-top: 35px;
        }
        .el_form_item_custom{
            width: 100%;
            margin: 0;
        }
        .el_button{
            width: 290px;
            height: 50px;
            border-radius: 2px;
        }
    }
}
</style>